<!DOCTYPE html>
<html class="" lang="zh-cmn-Hans" style="position: static;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="keywords" content="有赞,移动电商服务平台">
  <meta name="description" content="">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="cleartype" content="on">
  <meta name="referrer" content="always">
  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
  <title>购物车</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- <link rel="stylesheet" href="./css/cart_base.css"> -->
  <!-- <link rel="stylesheet" href="./css/cart_trade.css"> -->
  <!-- <link rel="stylesheet" href="./css/cart.css"> -->
  <style>
    [v-cloak] {
    display: none;
  }
  </style>
</head>

<body class=" body-fixed-bottom" style="">
  <div id="app" v-cloak>
    <div class="container " style="min-height: 581px;">
      <div class="content clearfix js-page-content">
        <div id="cart-container">
          <div>
            <!---->
            <!---->
            <!---->
            <div class="js-shop-list shop-list">
              <div class="block block-order block-cart" v-for="(shop,shopIndex) in lists">
                <div class="header">
                  <div class="select-group js-select-group" @click="selectShop(shop)">
                    <span class="check" :class="{checked:shop.checked}" v-show="!editingShop"></span>
                    <span class="check" :class="{checked:shop.removeChecked}" v-show="editingShop"></span>
                  </div>
                  <a class="shop-title">
                    <i class="custom-store-img">店铺：</i>{{shop.shopTitle}}</a>
                  <a href="javascript:;" data-type="cart" class="j-edit-list pull-right c-blue font-size-12 edit-list"
                    @click="edit(shop,shopIndex)">
                    <!---->
                    {{shop.editingMsg}}
                  </a>
                </div>
                <!---->
                <div>
                  <ul class="js-list block block-list block-list-cart border-0">
                    <li class="block-item block-item-cart" :class="{editing:shop.editing}" :ref="'goods-'+shopIndex+'-'+goodIndex"
                      v-for="(good, goodIndex) in shop.goodsList" :key="good.id" @touchstart="start($event,good)"
                      @touchend="end($event,shopIndex,good,goodIndex)">
                      <div>
                        <div class="check-container" @click="selectGood(shop,good)">
                          <span class="check" :class="{checked:editingShop?good.removeChecked:good.checked}"></span>
                        </div>
                        <div class="name-card clearfix">
                          <a class="thumb js-goods-link">
                            <img class="js-lazy" :src="good.img">
                            <!---->
                          </a>
                          <div class="detail">
                            <a class="js-goods-link">
                              <h3 class="title js-ellipsis"><i>{{good.title}}</i></h3>
                            </a>
                            <p class="sku ellipsis">
                              {{good.sku}}
                            </p>
                            <!-- 显示状态 -->
                            <div class="num" v-show="!shop.editing">
                              ×<span class="num-txt">{{good.number}}</span>
                              <!---->
                            </div>
                            <!-- 编辑状态 -->
                            <div class="num" v-show="shop.editing">
                              <!---->
                              <div class="quantity">
                                <button type="button" class="minus" :class="{disabled:good.number===1}"></button>
                                <input type="text" pattern="[0-9]*" class="txt" v-model="good.number">
                                <button type="button" class="plus "></button>
                                <div class="response-area response-area-minus" @click="reduce(good)"></div>
                                <div class="response-area response-area-plus" @click="add(good)"></div>
                              </div>
                            </div>
                            <div class="price c-orange">
                              ¥<span>{{good.price}} </span></div>
                          </div>
                          <div class="error-box"></div>
                        </div>
                        <div class="delete-btn" @click="remove(shop,shopIndex,good,goodIndex)"><span>删除</span></div>
                      </div>
                    </li>

                </div>
              </div>

            </div>
            <div class="js-invalid-goods shop-list" v-show="showInvalid">
              <p class="block invalid-list-title">
                以下商品无法一起购买
              </p>
              <div class="block block-list-cart block-order border-top-0">
                <ul class="block border-0 invalid-list js-invalid-list">
                  <li class="block-item block-item-cart error">
                    <div index="0">
                      <div class="check-container hide"><span class="check"></span></div>
                      <div class="name-card clearfix">
                        <a href="https://h5.youzan.com/v2/showcase/goods?alias=36co1k2m80lmu" class="thumb js-goods-link"><img
                            data-src="https://img.yzcdn.cn/upload_files/2017/06/29/FstNOp77JZHQjZIDFd5LlZYE3j_j.jpg!200x200.jpg"
                            class="js-lazy" src="https://img.yzcdn.cn/upload_files/2017/06/29/FstNOp77JZHQjZIDFd5LlZYE3j_j.jpg?imageView2/2/w/200/h/200/q/75/format/webp">
                          <!---->
                        </a>
                        <div class="detail"><a href="https://h5.youzan.com/v2/showcase/goods?alias=36co1k2m80lmu" class="js-goods-link">
                            <h3 class="title js-ellipsis"><i>国际安徒生奖大奖书系（文学作品系列第二辑 共8册） 国际安徒生奖获奖书系
                                是经过IBBY各国分会和丛书主编、著名儿童文学理论家方卫平教授层层筛选产生的经典佳作</i></h3>
                          </a>
                          <p class="sku ellipsis">
                            下周二发货
                          </p>
                          <div class="num">
                            ×<span class="num-txt">1</span>
                            <!---->
                          </div>
                          <!---->
                        </div>
                        <div class="error-box">商品已售罄</div>
                      </div>
                      <div class="delete-btn"><span>删除</span></div>
                    </div>
                  </li>
                </ul>
                <div class="center clear-block">
                  <button class="btn clear-btn js-clear" @click="clearInvalid">清空失效商品</button>
                </div>
              </div>
            </div>
            <div style="padding:0;" class="js-bottom-opts bottom-fix">
              <div class="go-shop-tip js-go-shop-tip c-orange font-size-12">
                你需要分开结算每个店铺的商品哦~
              </div>
              <div class="bottom-cart clear-fix">
                <div class="select-all">
                  <span class="check" :class="{checked:editingShop?allRemoveSelected:allSelected}" @click="selectAll"></span>
                  全选
                </div>
                <!-- 显示状态 -->
                <div class="total-price" v-show="!editingShop">
                  合计：¥<span class="js-total-price" style="color: rgb(255, 102, 0);">{{total | currency}}</span>
                  <p class="c-gray-dark">不含运费</p>
                </div>
                <button href="javascript:;" class="js-go-pay btn btn-orange-dark font-size-14" :disabled="!selectLists.length"
                  v-show="!editingShop" @click="clearcart">
                  结算 (3)
                </button>
                <!-- 编辑状态 -->
                <button href="javascript:;" :disabled="!removeLists.length" class="j-delete-goods btn font-size-14 btn-red"
                  v-show="editingShop" @click="removeList">
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="0SuefKPV4p" v-show="removePopup" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000;  opacity: 1;"></div>
      <div id="d2tfiX27YS" v-show="removePopup" class="popout-confirm popout-box" style="overflow: hidden; position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); visibility: visible; border-radius: 4px; background: white; width: 270px; padding: 15px; opacity: 1;">
        <div class="confirm-content font-size-14" style="line-height: 20px; padding: 5px 5px 10px;">
          {{removeMsg}}
        </div>
        <hr style="margin: 9px -15px 10px;">
        <div class="btn-2-1" style="width: 47.5%;">
          <p class="js-cancel center font-size-16" style="padding-top: 5px;" @click="removePopup=false">取消</p>
        </div>
        <div class="btn-2-1" style="width: 47.5%;">
          <p class="js-ok center c-green font-size-16" style="padding-top: 5px;" @click="removeConfirm">确定</p>
        </div>
      </div>
      <div id="56ubfKyu8j" v-show="clearCart" style="height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000;  opacity: 1;"></div>
      <div id="d2tfiX27YS" v-show="clearCart" class="popout-confirm popout-box" style="overflow: hidden; position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); visibility: visible; border-radius: 4px; background: white; width: 270px; padding: 15px; opacity: 1;">
        <div class="confirm-content font-size-14" style="line-height: 20px; padding: 5px 5px 10px;">
          付款请恕我无能为力QAQ
        </div>
        <hr style="margin: 9px -15px 10px;">
        <div class="btn-2-1" style="width: 47.5%;">
          <p class="js-cancel center font-size-16" style="padding-top: 5px;" @click="clearCart=false">取消</p>
        </div>
        <div class="btn-2-1" style="width: 47.5%;">
          <p class="js-ok center c-green font-size-16" style="padding-top: 5px;" @click="clearConfirm">确定</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
